<template>

  <!-- 搜索栏部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <!-- model 绑定表单数据 -->
            <el-form :inline="true" :model="queryOptionLog" class="demo-form-inline">
                <el-form-item label="用户">
                    <el-input v-model="queryOptionLog.username" placeholder="日志模块"/>
                </el-form-item>
                <el-form-item label="日志模块">
                    <el-input v-model="queryOptionLog.module" placeholder="日志模块"/>
                </el-form-item>

                <el-form-item label="状态">
                    <el-select
                            style="width: 100px"
                            v-model="queryOptionLog.logStatus"
                            placeholder="选择状态"
                    >
                        <el-option value="0" :selected="true" label="全部"/>
                        <el-option value="1" label="正常"/>
                        <el-option value="2" label="废弃"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="日志时间">
                    <el-date-picker
                            v-model="createTimes"
                            type="datetimerange"
                            range-separator="To"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            value-format="YYYY-MM-DD HH:mm:ss"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loadOptionLog">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
  <!-- 搜索栏部分结束 -->

  <!-- 工具栏部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                           @confirm="deleteBtnHandler" title="您确定要删除选中的典信息吗？">
                <template #reference>
                    <el-button :disabled="deleteBtnDisabled" type="primary">
                        <el-icon>
                            <Minus/>
                        </el-icon>
                    </el-button>
                </template>
            </el-popconfirm>
        </el-col>
    </el-row>
  <!-- 工具栏部分结束 -->
  <!-- 列表部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <el-table ref="optionLogTable" @selection-change="handleSelectionChange" :data="optionLogs" border :stripe="true"
                      style="width: 95%">
                <el-table-column type="selection" width="55"/>
                <el-table-column prop="logId" label="#"/>
                <el-table-column prop="module" label="模块"/>
                <el-table-column prop="user.username" label="用户"/>
                <el-table-column prop="requestUrl" label="url"/>
                <el-table-column prop="logStatus" label="状态">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.logStatus == 1">正常</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.logStatus == 2">废弃</el-tag>
                        <el-tag type="danger" v-else>删除</el-tag>
                    </template>
                </el-table-column>
                <el-table-column width="180" prop="createTime" label="创建时间"/>
                <!-- 行工具栏 -->
                <el-table-column width="140" label="操作">
                    <template #default="scope">
                        <el-button type="success" @click="showDetail(scope.row.logId)" size="small">详情</el-button>
                        <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                                       @confirm="deleteOptionLog(scope.row.logId)" title="您确定要删除这个日志信息吗？">
                            <template #reference>
                                <el-button type="danger" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
  <!-- 列表部分结束 -->
  <!-- 分页部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <el-pagination background @change="pageChange" layout="prev, pager, next" v-bind:page-size="limit"
                           :total="total"/>
        </el-col>
    </el-row>
  <!-- 分页部分结束 -->

  <!-- 使用子组件 -->
    <LogDetail :visible="dialogVisible" :logId="currentlogId" @optionCompleted="closeWin"/>
</template>

<script>
import LogDetail from './log-detail.vue';
// 引入api
import optionLogRequest from '../../../api/option-log.js';

export default {
    components: {
        LogDetail
    },
    name: "optionLog.vue",
    data() {
        return {
            queryOptionLog: {},// 绑定查询条件
            createTimes: [],// 绑定搜索栏中的时间范围
            optionLogs: [],// 列表数据
            currentPage: 1,// 当前页码
            limit: 10,// 每页大小
            total: 0,// 总条数
            deleteBtnDisabled:true,// 删除按钮是否禁用
            dialogVisible:false,// 详情窗体是否显示
            currentlogId:-1,//当前查看的日志编号
        }
    }, methods: {
        showDetail(logId){
            this.currentlogId = logId;
            this.dialogVisible = true;
        },
        /**
         * 工具栏删除按钮事件
         */
        deleteBtnHandler() {
            let selectionRows = this.$refs.optionLogTable.getSelectionRows();
            let logIds = new Array();
            selectionRows.forEach(row => {
                logIds.push(row.logId);
            })
            optionLogRequest.deleteoptionLogs(logIds, res => {
                this.$message({
                    type: 'success',
                    message: '删除日志成功!'
                });
                this.loadOptionLog();
            });
        },
        /**
         * 行删除按钮事件
         * @param logId
         */
        deleteOptionLog(logId) {
            optionLogRequest.deleteOptionLog(logId, res => {
                this.$message({
                    type: 'success',
                    message: '删除日志成功!'
                });
                this.loadOptionLog();
            });
        },

        /**
         * 表格中数据选择事件
         */
        handleSelectionChange() {
            let selectionRows = this.$refs.optionLogTable.getSelectionRows();
            if (selectionRows.length > 0) {
                this.deleteBtnDisabled = false;
            }
        },

        /**
         * 监听子组件日志项弹窗的操作是否完成
         */
        closeWin() {
            this.currentlogId = -1;
            this.dialogVisible = false;
        },

        /**
         * 翻页的事件
         * @Param currentPage 最新的页码
         */
        pageChange(currentPage, pageSize) {
            // 将最新的页码赋值给this.currentPage
            this.currentPage = currentPage;
            // 重新加载数据
            this.loadOptionLog();
        },
        /**
         * 加载日志信息
         */
        loadOptionLog() {
            // 设置其他的条件
            this.queryOptionLog.page = this.currentPage;
            this.queryOptionLog.limit = this.limit;
            // 设置时间
            if (this.createTimes != undefined && this.createTimes.length > 0)
                this.queryOptionLog.createTimeStart = this.createTimes[0];
            if (this.createTimes != undefined && this.createTimes.length > 1)
                this.queryOptionLog.createTimeEnd = this.createTimes[1];
            optionLogRequest.loadOptionLog(this.queryOptionLog, res => {
                this.optionLogs = res.data.data;
                this.total = res.data.total;
            })
        }
    }, mounted() {
        this.loadOptionLog();
    }
}
</script>

<style scoped>

</style>